import React from 'react';
import { TableC, FirstHeaderC, PrimaryC, InfoTipsC, SecondHeaderC } from '../../comps';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Popconfirm, Tooltip } from 'antd';
import accounting from 'accounting';
import colors from '../../css/colors';

class TableCDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      col1: undefined,
      ds1: undefined,
      col2: undefined,
      ds2: undefined,
      total: 0,
      defaultCurrent: 1,
      current1: 1,
      current2: 1,
      pageSize1: 10,
      pageSize2: 20,
      expandedRowKeys: [1], //展开的节点
      sortedInfo: null, //排序数据
    };

    setTimeout(() => {
      const data = [];
      for (let i = 0; i < 20; ++i) {
        data.push({
          key: i,
          name: 'Screem' + i,
          platform: 12345788.12,
          version: '10.3.4.5654',
          upgradeNum: 5698.23,
          creator: 'Jack',
          createdAt: '2014-12-24 23:12:00',
        });
      }
      this.setState({
        col1: [
          { title: 'Name', key: 'name' },
          { title: '价格', key: 'platform', type: 'money' },
          { title: 'Version', key: 'version' },
          { title: '数值', key: 'upgradeNum', type: 'number' },
          { title: 'Creator', key: 'creator' },
          { title: 'Date', key: 'createdAt' },
        ],
        ds1: [],
        col2: [
          { title: 'Name', key: 'name' },
          { title: '价格', key: 'platform', type: 'money' },
          { title: 'Version', key: 'version' },
          { title: '数值', key: 'upgradeNum', type: 'number' },
          { title: 'Creator', key: 'creator' },
          { title: 'Date', key: 'createdAt' },
        ],
        ds2: data,
        total: 153,
        // defaultCurrent: 8,
      });
    }, 1000 * 5);
  }

  onClick1 = () => {
    const data = [];
    for (let i = 0; i < 50; ++i) {
      data.push({
        key: i,
        name: 'new' + i,
        platform: 100,
        version: '10.3.4.5654',
        upgradeNum: 100,
        creator: 'Jack',
        createdAt: '2014-12-24 23:12:00',
      });
    }
    this.setState({
      ds2: data,
      current2: 1,
      total: 50,
    });
  };

  onPageChange1 = (page, pageSize) => {
    this.setState({
      current1: page,
    });
  };
  onPageChange2 = (page, pageSize) => {
    this.setState({
      current2: page,
    });
  };

  onShowSizeChange1 = (current, size) => {
    this.setState({
      current1: 1,
      pageSize1: size,
    });
  };

  onShowSizeChange2 = (current, size) => {
    this.setState({
      current2: 1,
      pageSize2: size,
    });
  };
  //处理排序
  handleTableChange = (pagination, filter, sorter) => {
    // sorter.order == "descend" ? newOrder ='DESC':( sorter.order == "ascend"?newOrder ='ASC':newOrder = '')
    console.log('获取排序相关数据：', sorter);
    this.setState({
      sortedInfo: sorter,
    });
  };
  render() {
    const columns = [
      { title: 'Name', key: 'name' },
      { title: '价格(保留4位）', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', key: 'version' },
      { title: '数值', key: 'upgradeNum', type: 'number' },
      { title: '比率', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', key: 'price', type: 'money' },
      { title: 'Date', key: 'createdAt', type: 'date' },
      { title: '开始日期', key: 'startDate', type: 'date', formatStr: 'YYYY-MM-DD HH:mm:ss' },
    ];
    const columns1 = [
      { title: 'Name', key: 'name', width: '15%', ellipsis: true }, //设置x:'max-content' 省略不生效
      { title: '价格', key: 'platform', type: 'money' },
      { title: 'Version', key: 'version' },
      { title: 'cols', key: 'upgradeNum' },
      { title: '比率', key: 'creator', type: 'rate' },
      { title: 'Date', key: 'createdAt', fixed: 'right' },
    ];
    const columns22 = [
      { title: 'Name', key: 'name', width: '15%' },
      { title: '价格', key: 'platform', type: 'money' },
      { title: 'Version', key: 'version' },
      { title: 'cols', key: 'upgradeNum' },
      { title: '比率', key: 'creator', type: 'rate' },
      { title: 'Date', key: 'createdAt' },
    ];
    const columns33 = [
      { title: 'Name', key: 'name' },
      { title: '价格', key: 'platform', type: 'money', width: 250 },
      { title: 'Version', key: 'version', width: 250 },
      { title: 'cols', key: 'upgradeNum', width: 250, ellipsis: true },
      { title: '比率', key: 'creator', type: 'rate', width: 250 },
      { title: 'Date', key: 'createdAt', width: 180, fixed: 'right' },
    ];
    const columns44 = [
      { title: 'Name', key: 'name' },
      { title: '价格', key: 'platform', type: 'money' },
      { title: 'Version', key: 'version' },
      { title: 'cols', key: 'upgradeNum', ellipsis: true },
      { title: '比率', key: 'creator', type: 'rate' },
      { title: 'Date', key: 'createdAt', width: 180, fixed: 'right' },
    ];
    const columns55 = [
      { title: 'Name', key: 'name' },
      { title: '价格', key: 'platform', type: 'money' },
      { title: 'Version', key: 'version' },
      { title: 'cols', key: 'upgradeNum', ellipsis: true },
      { title: '比率', key: 'creator', type: 'rate' },
      { title: 'Date', key: 'createdAt', width: 180 },
    ];
    const columns66 = [
      { title: 'Name', key: 'name', width: 220 },
      { title: '价格', key: 'platform', type: 'money' },
      { title: 'Version', key: 'version' },
      { title: 'cols', key: 'upgradeNum', width: 250, type: 'maxContent' },
      { title: '比率', key: 'creator', type: 'rate' },
      { title: 'Date', key: 'createdAt', width: 180, fixed: 'right' },
    ];
    const columns77 = [
      { title: 'Name', key: 'name', width: 220, type: 'maxContent' },
      { title: '价格', key: 'platform', width: 180, type: 'money' },
      { title: 'Version', key: 'version', width: 180 },
      { title: 'cols', key: 'upgradeNum', width: 300, type: 'maxContent' },
      { title: '比率', key: 'creator', type: 'rate' },
      { title: 'Date', key: 'createdAt', width: 180, fixed: 'right' },
    ];
    const columns88 = [
      { title: 'Name', key: 'name', width: 220 },
      { title: '价格', key: 'platform', type: 'money' },
      { title: 'Version', key: 'version' },
      { title: 'cols', key: 'upgradeNum', ellipsis: true },
      { title: '比率', key: 'creator', type: 'rate' },
      { title: 'Date', key: 'createdAt', width: 180, fixed: 'right' },
    ];
    const columns2 = [
      { title: '姓名', key: 'name' },
      { title: '班级', key: 'class' },
      { title: '年龄', key: 'age', type: 'number' },
      {
        title: '成绩',
        dataIndex: 'score',
        key: 'score',
        type: 'number',
        render: (text, record, index) => {
          if (record.score === 100) return <div style={{ color: 'red' }}>{text}</div>;
          return text;
        },
      },
      {
        title: '学费',
        dataIndex: 'price',
        key: 'price',
        type: 'money',
        render: (text, record, index) => {
          if (record.price > 10000) return <div style={{ color: 'green' }}>{accounting.formatNumber(text)}</div>;
          return text;
        },
      },
      {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        type: 'operate',
        operates: [
          {
            title: '编辑',
            onClick: (record, index) => console.log(record, index),
            // 姓名不为“小明”时，禁止编辑
            // 姓名不为小明和小红，隐藏编辑按钮
            // 默认同字段，条件之间是或的关系，不同字段，条件之间是与关系
            rules: {
              disabled: { relation: 'and', items: [{ key: 'name', value: ['小明'], relation: ['!='] }] },
              // hide:{items:[{key:'name',value:['小红'],relation:['=']},{key:'score',value:[95],relation:['=']}]}
              hide: {
                items: [
                  { key: 'name', value: ['小红'], relation: ['!='] },
                  { key: 'name', value: ['小明'], relation: ['!='] },
                ],
              },
            },
          },
          {
            title: '删除',
            onClick: (record, index) => console.log(record, index),
            // 姓名为小明或者分数98分的，禁止删除
            rules: {
              // hide:{relation:'and',items:[{key:'score',value:[100],relation:['=']}]},
              disabled: {
                relation: 'or',
                items: [
                  { key: 'name', value: ['小明'], relation: ['='] },
                  { key: 'score', value: [98], relation: ['='] },
                ],
              },
            },
          },
        ],
      },
    ];
    const columns4 = [
      { title: 'Name', key: 'name' },
      { title: '价格', key: 'platform', type: 'money' },
      { title: '涨跌幅', key: 'version', type: 'columnView', width: 180 },
      { title: '数值', key: 'upgradeNum', type: 'number', width: 150 },
      { title: '比率', key: 'creator', width: 150, type: 'rate' },
      { title: 'Date', key: 'createdAt', width: '20%' },
    ];
    const columns7 = [
      { title: 'Name', key: 'name' },
      { title: '价格', key: 'platform', type: 'money' },
      { title: '涨跌幅', key: 'version', type: 'updownText' },
      { title: '数值', key: 'upgradeNum', type: 'number', width: 150 },
      { title: '比率', key: 'creator', width: 150, type: 'rate' },
      { title: 'Date', key: 'createdAt', width: '20%' },
      {
        title: '交易状态',
        key: 'statusTip',
        type: 'statusTip',
        tipValue: [
          {
            value: '0', //后端传的值
            title: '交易', //标签title
            class: 'tip-green', //标签样式
          },
          {
            value: '1',
            title: '停牌',
            class: 'tip-grey',
          },
        ],
      },
    ];
    const columns9 = [
      { title: 'Name', key: 'name' },
      { title: '价格', key: 'platform', type: 'money' },
      {
        title: '涨跌幅',
        key: 'version',
        render: (text, record, index) => {
          if (record.version > 0) {
            return (
              <span>
                {text.toFixed(2)}{' '}
                <Tooltip title={text.toFixed(2)} overlayClassName={'tableTipStyle'}>
                  &nbsp;
                  <QuestionCircleOutlined style={{ color: '#4D86FF' }} />
                </Tooltip>
              </span>
            );
          } else {
            return text.toFixed(2);
          }
        },
      },
      {
        title: '数值',
        key: 'upgradeNum',
        type: 'number',
        width: 150,
        onCell: (record, rowIndex) => {
          let cellProps = {};
          if (record.upgradeNum < 1000) {
            cellProps.style = {
              background: 'green',
            };
          } else if (record.upgradeNum > 3000) {
            cellProps.style = {
              background: 'red',
            };
          }
          return cellProps;
        },
      },
      { title: '比率', key: 'creator', width: 150, type: 'rate' },
      { title: 'Date', key: 'createdAt', width: '20%', type: 'textTooltip', tipTitle: '这只是一个时间' },
    ];

    const columns10 = [
      { title: '姓名', width: 150, key: 'name', type: 'filterCol' },
      { title: '班级', key: 'class', width: 150, type: 'filterCol' },
      { title: '生日', key: 'birthday', type: 'date' },
      { title: '年龄', key: 'age', type: 'number' },
      {
        title: '成绩',
        dataIndex: 'score',
        key: 'score',
        type: 'number',
        render: (text, record, index) => {
          if (record.score === 100) return <div style={{ color: 'red' }}>{text}</div>;
          return text;
        },
      },
      {
        title: '学费',
        dataIndex: 'price',
        key: 'price',
        type: 'money',
        render: (text, record, index) => {
          if (record.price === '' || record.price === undefined || record.price === null) {
            return '--';
          } else if (record.price > 10000) {
            return <div style={{ color: 'green' }}>{accounting.formatNumber(text)}</div>;
          } else {
            return accounting.formatNumber(text);
          }
        },
      },
    ];
    const columns12 = [
      {
        title: 'Name',
        key: 'name',
        sorter: (a, b) => a.name.length - b.name.length,
        sortDirections: ['descend'],
      },
      {
        title: 'Age',
        key: 'age',
        defaultSortOrder: 'descend',
        sorter: (a, b) => a.age - b.age,
      },
      {
        title: 'Address',
        key: 'address',
        sorter: (a, b) => a.address.length - b.address.length,
        sortDirections: ['descend', 'ascend'],
      },
    ];
    //设置排序
    let { sortedInfo } = this.state;
    sortedInfo = sortedInfo || {};
    const columns13 = [
      {
        title: 'Name',
        key: 'name',
        sorter: true,
        sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
      },
      {
        title: 'Age',
        key: 'age',
        sorter: true,
        sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
      },
      {
        title: 'Address',
        key: 'address',
      },
    ];
    const columns14 = [
      {
        title: 'Name',
        key: 'name',
      },
      {
        title: 'Age',
        key: 'age',
        onCell: (record, rowIndex) => {
          let cellProps = {};
          if (record.rank > 0) {
            cellProps.style = {
              background: colors.top5Colors[record.rank - 1],
            };
          } else if (record.rank < 0) {
            cellProps.style = {
              background: colors.bottom5Colors[Math.abs(record.rank) - 1],
            };
          }
          return cellProps;
        },
      },
      {
        title: 'Address',
        key: 'address',
      },
    ];
    const data12 = [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
      {
        key: '4',
        name: 'Jim Red',
        age: 32,
        address: 'London No. 2 Lake Park',
      },
    ];
    const data13 = [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
      {
        key: '4',
        name: 'Jim Red',
        age: 12,
        address: 'London No. 2 Lake Park',
      },
      {
        key: '6',
        name: 'John Brown',
        age: -82,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '7',
        name: 'Jim Green',
        age: -12,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '8',
        name: 'Joe Black',
        age: 45,
        address: 'Sidney No. 1 Lake Park',
      },
      {
        key: '9',
        name: 'Jim Red',
        age: 13,
        address: 'London No. 2 Lake Park',
      },
      {
        key: '10',
        name: 'Jim Red',
        age: 72,
        address: 'London No. 2 Lake Park',
      },
      {
        key: '11',
        name: 'Jim Red',
        age: 9,
        address: 'London No. 2 Lake Park',
      },
      {
        key: '13',
        name: 'Jim Red',
        age: 3,
        address: 'London No. 2 Lake Park',
      },
    ];

    let arr1 = JSON.parse(JSON.stringify(data13));
    let compare = (property) => {
      return (a, b) => {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    };
    arr1.sort(compare('age'));
    arr1.map((item, index, temp) => {
      if (index < 5) {
        item.rank = index + 1;
      }
      if (index >= temp.length - 5) {
        item.rank = index - temp.length;
      }
    });
    data13.map((item) => {
      arr1.map((x) => {
        if (item.key == x.key) {
          item.rank = x.rank;
        }
      });
    });

    const data = [];
    for (let i = 0; i < 100; ++i) {
      let children = [];
      for (let j = 0; j < 2; j++) {
        children.push({
          key: `${i}_${j}`,
          name: 'Screem' + i + j,
          platform: 0,
          version: '10.3.4.5654',
          upgradeNum: 5698.23452,
          creator: '0.121',
          price: '123.56895',
          createdAt: '2014-12-24 23:12:00',
        });
      }
      data.push({
        key: i,
        name: 'Screem' + i,
        platform: 0,
        version: '10.3.4.5654',
        upgradeNum: 5698.23452,
        creator: '0.121',
        price: '123.56895',
        createdAt: '2014-12-24 23:12:00',
        startDate: '2014-12-25 23:12:00',
        children: children,
      });
    }
    const data1 = [];
    for (let i = 0; i < 3; ++i) {
      data1.push({
        key: i,
        name: 'Screem' + i,
        platform: 12345788.12,
        version: '10.3.4.5654',
        upgradeNum: 5698.23,
        creator: 0.5689548,
        createdAt: '2014-12-24 23:12:00',
      });
    }
    const data2 = [
      { key: 1, name: '小明', birthday: '19960502', class: '一班', age: 12, score: 100, price: 10000 },
      { key: 2, name: '小红', birthday: '', class: '二班', age: 12, score: 95, price: 20000 },
      { key: 3, name: '小兰', birthday: NaN, class: '三班', age: 12, score: 98, price: 30000 },
      { key: 4, name: '小王', birthday: NaN, class: '四班', age: 12, score: 50, price: 30000 },
      { key: 5, name: '小红', birthday: '', class: '三班', age: 12, score: 100, price: 20000 },
    ];

    const data4 = [
      {
        key: 1,
        name: 'Screem',
        platform: 12345788.12,
        version: -3,
        upgradeNum: 5698.23,
        creator: 0.5689548,
        createdAt: '2014-12-24 23:12:00',
        statusTip: '0',
      },
      {
        key: 2,
        name: 'Screem',
        platform: 12345788.12,
        version: -11,
        upgradeNum: 5698.23,
        creator: 0.5689548,
        createdAt: '2014-12-24 23:12:00',
        statusTip: '1',
      },
      {
        key: 3,
        name: 'Screem',
        platform: 12345788.12,
        version: 8,
        upgradeNum: 5698.23,
        creator: 0.5689548,
        createdAt: '2014-12-24 23:12:00',
        statusTip: '1',
      },
    ];
    const data5 = [];
    for (let i = 0; i < 3; ++i) {
      data5.push({
        key: i,
        name: 'Screem' + i,
        platform: 12345788.12,
        version: '10.3.4.5654',
        upgradeNum: 5698.23,
        creator: 0.5689548,
        createdAt: '2014-12-24 23:12:00',
        description: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
      });
    }
    const data3 = [];
    for (let i = 0; i < 3; ++i) {
      data3.push({
        key: i,
        name: 'Screem' + i,
        platform: 12345788.12,
        version: 'version' + i,
        upgradeNum: 5698.23,
        creator: 0.5689548,
        createdAt: '2014-12-24 23:12:00',
      });
    }
    const data6 = [];
    for (let i = 0; i < 5; ++i) {
      data6.push({
        key: i + 1,
        name: 'Screem' + (i + 1),
        platform: 12345788.12 * Math.random(),
        version: -3 + 5 * Math.random(),
        upgradeNum: 4000.55 * Math.random(),
        creator: 0.5689548 * Math.random(),
        createdAt: Math.random() > 0.3 ? '2014-12-24 23:12:00' : '',
      });
    }
    const data7 = [];
    for (let i = 0; i < 100; ++i) {
      data7.push({
        key: i + 1,
        name: 'Screem' + (i + 1) + 'longlonnglonglonglonglonglonglong',
        platform: 12345788999.12 * Math.random(),
        version: 123457886666.12 * Math.random(),
        upgradeNum: '单元格单元格单元格单元格单元格单元格',
        creator: 0.5689548 * Math.random(),
        createdAt: Math.random() > 0.3 ? '2014-12-24 23:12:00' : '',
      });
    }
    const data8 = [];
    for (let i = 0; i < 50; ++i) {
      data8.push({
        key: i + 1,
        name: 'Screem' + (i + 1) + 'longlonnglonglonglonglonglonglong',
        platform: 12345788999.12 * Math.random(),
        version: 123457886666.12 * Math.random(),
        upgradeNum:
          '单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格11111111111111111111111',
        creator: 0.5689548 * Math.random(),
        createdAt: Math.random() > 0.3 ? '2014-12-24 23:12:00' : '',
      });
    }
    return (
      <div style={{ width: 1000, padding: '20px' }}>
        <FirstHeaderC title='标准表格（data加children子项默认为表格，）' />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC style={{ paddingLeft: '20px', width: '100%' }} Left='标准表格涵盖数据展示的类型，数值、小数位、比率、价格、日期。'></InfoTipsC>
        </div>
        <TableC
          columns={columns}
          dataSource={data}
          pageSize={5}
          current={this.state.current1}
          onShowSizeChange={this.onShowSizeChange1}
          onPageChange={this.onPageChange1}
          rowKey='key'
        />
        <br />
        <FirstHeaderC title='默认展开defaultExpandAllRows,expandedRowRender展开内容' />
        <TableC
          columns={columns}
          dataSource={data5}
          hidePage={true}
          onShowSizeChange={this.onShowSizeChange1}
          onPageChange={this.onPageChange1}
          defaultExpandAllRows={true}
          expandedRowRender={(record) => <p style={{ margin: 0 }}>{record.description}</p>}
          rowKey='key'
        />
        <br />
        <FirstHeaderC title='默认展开指定项defaultExpandedRowKeys' />
        <TableC
          columns={columns}
          dataSource={data5}
          hidePage={true}
          onShowSizeChange={this.onShowSizeChange1}
          onPageChange={this.onPageChange1}
          expandedRowRender={(record) => <p style={{ margin: 0 }}>{record.description}</p>}
          defaultExpandedRowKeys={[0]}
          rowKey='key'
        />
        <br />
        <FirstHeaderC title='展开指定项expandedRowKeys 外界可控，onExpandedRowsChange，onExpand' />
        <TableC
          columns={columns}
          dataSource={data5}
          hidePage={true}
          onShowSizeChange={this.onShowSizeChange1}
          onPageChange={this.onPageChange1}
          expandedRowRender={(record) => <p style={{ margin: 0 }}>{record.description}</p>}
          expandedRowKeys={this.state.expandedRowKeys}
          onExpandedRowsChange={(expandedRows) => {
            console.log('获取当前展开项的key：', expandedRows);
            this.setState({ expandedRowKeys: [...expandedRows] });
          }}
          onExpand={(expanded, record) => {
            console.log('点击展开图标：', expanded, record);
          }}
          rowKey='key'
        />
        <br />
        <FirstHeaderC title='无需分页展示' />
        <TableC
          columns={columns}
          dataSource={data1}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          rowKey='key'
          hidePage={true}
          defaultExpandAllRows={true}
        />
        <br />
        <FirstHeaderC title='横向滚动' />
        <SecondHeaderC title="x: 'max-content',超出内容宽度，所有单元格内容不换行，单行全部展示" />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC style={{ paddingLeft: '20px', width: '100%' }} Left='设置ellipsis:true不生效，单元格Name定宽不生效，不换行'></InfoTipsC>
        </div>
        <TableC
          columns={columns1}
          dataSource={data7}
          pageSize={5}
          scroll={{ x: 'max-content' }}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          rowKey='key'
        />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC style={{ paddingLeft: '20px', width: '100%' }} Left='不设置ellipsis:true，单元格Name定宽生效，换行,请根据需求选择是否设置'></InfoTipsC>
        </div>
        <TableC
          columns={columns22}
          dataSource={data7}
          scroll={{ x: 'max-content' }}
          pageSize={5}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          rowKey='key'
        />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC
            style={{ paddingLeft: '20px', width: '100%' }}
            Left='x:"max-content" 单元格缩略使用type="maxContent"并设置width;(与横纵向例子用的同一份data和cols,这个正常，那个错位)'
          ></InfoTipsC>
        </div>
        <TableC
          columns={columns66}
          dataSource={data8}
          pageSize={5}
          scroll={{ x: 'max-content' }}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          rowKey='key'
        />
        <SecondHeaderC title='x:数值或者百分比' />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC style={{ paddingLeft: '20px', width: '100%' }} Left='指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x'></InfoTipsC>
        </div>
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC style={{ paddingLeft: '20px', width: '100%', color: 'red' }} Left='Name列未设置固定宽度，其他列设置宽度之和大于scroll.x宽度，出现异常情况'></InfoTipsC>
        </div>
        <TableC
          columns={columns33}
          dataSource={data8}
          scroll={{ x: 1000 }}
          pageSize={1}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          rowKey='key'
        />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC style={{ paddingLeft: '20px', width: '100%' }} Left='每列都不设置固定宽度，超长单元格自动换行，设置了ellipsis:true会进行缩略'></InfoTipsC>
        </div>
        <TableC
          columns={columns44}
          dataSource={data8}
          scroll={{ x: 1000 }}
          pageSize={1}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          rowKey='key'
        />
        <br />
        <FirstHeaderC title='纵向滚动' />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC
            style={{ paddingLeft: '20px', width: '100%' }}
            Left='每列都不设置固定宽度，超长单元格自动换行，设置了ellipsis:true会进行缩略;也可设置单元格固定宽度'
          ></InfoTipsC>
        </div>
        <TableC
          columns={columns55}
          dataSource={data8}
          scroll={{ y: 150 }}
          hidePage={true}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          rowKey='key'
        />
        <br />
        <FirstHeaderC title='横纵向都滚动' />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC
            style={{ paddingLeft: '20px', width: '100%', color: 'red' }}
            Left=" y: 150,x:'max-content';单元格缩略设置，如果每列单元格都比较长，可能会出现错位;"
          ></InfoTipsC>
        </div>
        <TableC
          columns={columns66}
          dataSource={data8}
          scroll={{ y: 150, x: 'max-content' }}
          hidePage={true}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          rowKey='key'
        />
        <br />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC style={{ paddingLeft: '20px', width: '100%' }} Left=" y: 150,x:'max-content';设置每列宽度,展示正常；如果数据很短的，不定宽也没问题；看情况处理"></InfoTipsC>
        </div>
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC
            style={{ paddingLeft: '20px', width: '100%' }}
            Left='scroll.x设置为数值，如果有新增的列，数值不大的情况，就需要重新修改x的值，用maxcontent就只需要设置那一列宽'
          ></InfoTipsC>
        </div>

        <TableC
          columns={columns77}
          dataSource={data8}
          scroll={{ y: 150, x: 'max-content' }}
          hidePage={true}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          rowKey='key'
        />
        <br />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC
            style={{ paddingLeft: '20px', width: '100%', color: 'red' }}
            Left=' y: 150,x:1000;单元格缩略设置ellipsis，不全部设置列宽,x宽度过小会换行，过大会占比太大，根据美观调整x宽度'
          ></InfoTipsC>
        </div>
        <TableC
          columns={columns88}
          dataSource={data8}
          scroll={{ y: 150, x: 1200 }}
          hidePage={true}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          rowKey='key'
        />
        <br />

        <FirstHeaderC title='带操作按钮' />
        <TableC
          columns={columns2}
          dataSource={data2}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          hidePage={true}
          rowKey='key'
        />
        <br />
        <FirstHeaderC title='异步，无数据' />
        <TableC
          columns={this.state.col1}
          dataSource={this.state.ds1}
          onShowSizeChange={(current, size) => console.log('onShowSizeChange', current, size)}
          onPageChange={(page, pageSize) => console.log('onPageChange', page, pageSize)}
          rowKey='key'
        />
        <br />
        <FirstHeaderC title='异步，有数据，后台分页' />
        <PrimaryC onClick={this.onClick1} title='查询' />
        <TableC
          columns={this.state.col2}
          dataSource={this.state.ds2}
          total={this.state.total}
          defaultCurrent={this.state.defaultCurrent}
          pageSize={5}
          current={this.state.current2}
          onShowSizeChange={this.onShowSizeChange2}
          onPageChange={this.onPageChange2}
          rowKey='key'
        />
        <br />
        <FirstHeaderC title='表格单元格涨跌柱' />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC style={{ paddingLeft: '20px', width: '100%' }} Left="columns列设置type: 'columnView',tableC设置widthKey 控制涨跌幅占该单元格的宽度"></InfoTipsC>
        </div>
        <TableC columns={columns4} dataSource={data4} hidePage={true} rowKey='key' widthKey='70%' />
        <br />
        <FirstHeaderC title='表格单元格特殊文本--涨跌样式' />
        <TableC columns={columns7} dataSource={data4} hidePage={true} rowKey='key' />
        <br />
        <FirstHeaderC title='表格单元格背景 + 问号提示' />
        <div style={{ marginBottom: '20px', width: '100%' }}>
          <InfoTipsC
            style={{ paddingLeft: '20px', width: '100%' }}
            Left="单元格背景通过columns列设置onCell来处理，问号通过columns列设置 type: 'textTooltip',tipTitle来控制，如果需要定制化可通过render处理"
          ></InfoTipsC>
        </div>
        <TableC columns={columns9} dataSource={data6} hidePage={true} rowKey='key' />
        <br />
        <FirstHeaderC title='filter和date' />
        <TableC columns={columns10} dataSource={data2} rowKey='key' hidePage={true} />
        <br />
        <FirstHeaderC title='sorter前端排序，columns设置sorter函数' />
        <TableC columns={columns12} dataSource={data12} rowKey='key' hidePage={true} />
        <br />
        <FirstHeaderC title='sorter后端排序，columns设置sorter:true,sortOrder(数据没排序，只是举个例子)' />
        <TableC columns={columns13} dataSource={data12} rowKey='key' onChange={this.handleTableChange} />
        <FirstHeaderC title='表格展示top5 bottom5' />
        <TableC columns={columns14} dataSource={data13} rowKey='key' onChange={this.handleTableChange} />
      </div>
    );
  }
}

export default TableCDemo;
